<script setup name="addPersonnel">
import { reactive, ref, } from "vue";
import department from "@/plugins/data/department";
import personnel_data from "@/plugins/data/personnel_data";
import router from "@/router";

const options = reactive(department)
const ruleFormName = ref(null)
const ruleFormIdCard = ref(null)
let ruleForm = ref({
  name: '',
  idCard: '',
  age: '',
  department: '',
  workingGroup: '',
  post: '',
  sex: 1,
  role: [],
  userName: '',
  pwd: '',
  openCard: 0,
  contactInformation: [
    {
      name: '手机号',
      value: ''
    },
    {
      name: '邮箱',
      value: ''
    }
  ]
})
const updateName = () => {
  ruleForm.value.name = ruleFormName.value
}

const updateIdCard = () => {
  ruleForm.value.idCard = ruleFormIdCard.value
}

const callBackName = () => {
  ruleFormName.value = ruleForm.value.name
}

const setIdCard = () => {

}

const callBackIdCard = () => {

}

const setName = () => {
  if (ruleFormName.value) {
    const aLength = ruleFormName.value.length
    if (aLength === 2) {
      const firstName = ruleForm.value.name.charAt(0)
      ruleFormName.value = `${firstName}*`
    } else if (aLength === 1) {
      ruleFormName.value = `${ruleForm.value.name}`
    } else {
      const firstName = ruleForm.value.name.charAt(0)
      const lastName = ruleForm.value.name.charAt(aLength - 1)
      const num = aLength - 2
      let str = ''
      for (let a = 0; a < num; a++) {
        str = `${str}*`
      }
      ruleFormName.value = `${firstName}${str}${lastName}`
    }
    console.log(ruleForm)
  }
}



const departmentProps = reactive({
  label: 'name',
  value: 'id'
})

const rules = reactive({
  name: [
    { required: true, message: '请输入姓名', trigger: 'blur' },
  ],
  idCard: [
    { required: true, message: '请输入身份证', trigger: 'blur' },
  ],
  department: [
    {
      required: true,
      message: '请选择部门',
      trigger: 'change',
    },
  ],
  post: [
    { required: true, message: '请输入职务', trigger: 'blur' },
  ]
})
const ruleFormRef = ref(null)
function goPostDataFun() {
  ruleFormRef.value.validate((valid, fields) => {
    if (valid) {
      console.log(ruleForm)
      const tableData = personnel_data.getList()
      personnel_data.addOne(JSON.parse(JSON.stringify({
        id: tableData.length + 1,
        ...ruleForm.value
      })))
      ruleFormRef.value && ruleFormRef.value.resetFields()
      router.push('/')
    } else {
      console.log('error submit!', fields)
    }
  })
}

function cancelFun() {
  ruleFormRef.value && ruleFormRef.value.resetFields()
}

const addContactInformation = (index) => {
  ruleForm.value.contactInformation.splice(index + 1, 0, {
    name: '',
    value: ''
  })
}

const removeContactInformation = (index) => {
  ruleForm.value.contactInformation.splice(index, 1)
}

const editRule = (val) => {
  console.log(val)
  if (val === 1) {
    rules.value = {
      name: [
        { required: true, message: '请输入姓名', trigger: 'blur' },
      ],
      idCard: [
        { required: true, message: '请输入身份证', trigger: 'blur' },
      ],
      department: [
        {
          required: true,
          message: '请选择部门',
          trigger: 'change',
        },
      ],
      post: [
        { required: true, message: '请输入职务', trigger: 'blur' },
      ],
      userName: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
      ],
      role: [
        {
          required: true,
          message: '请选择角色',
          trigger: 'change',
        },
      ],
    }
  } else {
    rules.value = {
      name: [
        { required: true, message: '请输入姓名', trigger: 'blur' },
      ],
      idCard: [
        { required: true, message: '请输入身份证', trigger: 'blur' },
      ],
      department: [
        {
          required: true,
          message: '请选择部门',
          trigger: 'change',
        },
      ],
      post: [
        { required: true, message: '请输入职务', trigger: 'blur' },
      ]
    }
  }
}

</script>

<template>
  <div class="addPersonnel">
    <div class="addPersonnel_model">
      <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="80px" :validate-on-rule-change="false"
        class="demo-ruleForm" size="large" status-icon>
        <div class="addPersonnel_model_body">
          <el-divider content-position="left">基本信息</el-divider>
          <div class="addPersonnel_model_body_content">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="姓名" prop="name">
                  <el-input :autofocus="true" @blur="setName" @focus="callBackName" @input="updateName"
                    v-model="ruleFormName" placeholder="请输入姓名" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="身份证" prop="idCard">
                  <el-input @blur="setIdCard" @focus="callBackIdCard" @input="updateIdCard" v-model="ruleFormIdCard"
                    placeholder="请输入身份证" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="年龄" prop="age">
                  <el-input v-model="ruleForm.age" placeholder="请输入年龄" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="所属部门" prop="department">
                  <el-cascader style="width: 100%" placeholder="请选择部门" :props="departmentProps" filterable
                    v-model="ruleForm.department" :options="options" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="工作组" prop="workingGroup">
                  <el-select style="width: 100%" v-model="ruleForm.workingGroup" placeholder="请选择工作组">
                    <el-option label="Zone one" value="shanghai" />
                    <el-option label="Zone two" value="beijing" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="职务" prop="post">
                  <el-input v-model="ruleForm.post" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="性别" prop="workingGroup">
                  <el-select style="width: 100%" v-model="ruleForm.sex" placeholder="请选择性别">
                    <el-option label="女" :value="1" />
                    <el-option label="男" :value="2" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-upload class="upload-demo" action="/api/upload" multiple :limit="3">
                  <el-button type="primary">Click to upload</el-button>
                  <template #tip>
                    <div class="el-upload__tip">
                      jpg/png files with a size less than 500KB.
                    </div>
                  </template>
                </el-upload>
              </el-col>
            </el-row>
          </div>
        </div>
        <div class="addPersonnel_model_body">
          <el-divider content-position="left">联系方式</el-divider>
          <div class="addPersonnel_model_body_content">
            <el-row :gutter="20">
              <template v-for="(data, index) in ruleForm.contactInformation">
                <el-col :span="12">
                  <div style="margin-bottom: 15px" :key="index">
                    <el-row :gutter="10">
                      <el-col :span="8">
                        <el-input v-model="data.name" placeholder="请输入联系类型"></el-input>
                      </el-col>
                      <el-col :span="12">
                        <el-input v-model="data.value" placeholder="请输入联系方式"></el-input>
                      </el-col>
                      <el-col :span="4">
                        <div class="operate">
                          <el-icon color="cornflowerblue" @click="addContactInformation(index)"
                            style="margin-right: 10px;cursor: pointer">
                            <CirclePlusFilled />
                          </el-icon>
                          <el-icon color="#df0505" v-if="index !== 0" @click="removeContactInformation(index)"
                            style="cursor: pointer">
                            <RemoveFilled />
                          </el-icon>
                        </div>
                      </el-col>
                    </el-row>
                  </div>
                </el-col>
              </template>
            </el-row>
          </div>
        </div>
        <div class="addPersonnel_model_body">
          <el-divider content-position="left">账号管理</el-divider>
          <div class="addPersonnel_model_body_content">
            <el-form-item label="开通账号" prop="openCard">
              <el-switch @change="editRule" v-model="ruleForm.openCard" :active-value="1" :inactive-value="0" />
            </el-form-item>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="账号" prop="userName">
                  <el-input :disabled="ruleForm.openCard !== 1" v-model="ruleForm.userName" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="角色" prop="role">
                  <el-select multiple :disabled="ruleForm.openCard !== 1" v-model="ruleForm.role" placeholder="请选择角色">
                    <el-option label="行政人员" value="shanghai" />
                    <el-option label="行政主管" value="2" />
                    <el-option label="财务人员" value="3" />
                    <el-option label="技术人员" value="4" />
                    <el-option label="财务主管" value="5" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-form>
    </div>
    <div class="addPersonnel_footer">
      <el-button size="large" @click="cancelFun()">取 消</el-button>
      <el-button type="primary" size="large" @click="goPostDataFun()">确 定</el-button>
    </div>
  </div>
</template>

<style scoped lang="scss">
.addPersonnel {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  left: 6px;
  overflow: hidden;
  background-color: white;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);

  .addPersonnel_model {
    width: 100%;
    overflow: auto;
    box-sizing: border-box;
    padding: 10px;
    height: calc(100% - 50px);

    .addPersonnel_model_body_title {
      font-size: 18px;
      width: max-content;
      box-sizing: border-box;
      padding: 10px 50px 10px 0;
      border-bottom: 1px solid deepskyblue;
    }

    .addPersonnel_model_body_content {
      width: 100%;
      height: auto;
      box-sizing: border-box;
      padding: 15px 0;

      .operate {
        width: 100%;
        height: 100%;
        display: flex;
        display: -webkit-flex;
        display: -moz-flex;
        align-items: center;
        font-size: 22px;
      }
    }
  }

  .addPersonnel_footer {
    text-align: center;
    box-sizing: border-box;
    padding: 0 25px;
    width: 100%;
    height: 50px;
  }
}
</style>
<style lang="scss">
.addPersonnel {
  .el-button {
    border-radius: 0;

  }

  .el-button--primary {
    background-color: cornflowerblue;
  }

  .el-radio-button__original-radio:checked+.el-radio-button__inner {
    background-color: cornflowerblue;
  }
}
</style>
